<template>
	<div class="content">
		<el-card class="box-card">
			<div class="tech-topView row" @click="goBack">
				<i class="el-icon-back" />
				<div class="el-title-text">订单详情</div>
			</div>

			<div class="lb-tips danger">
				<div class="custom-item row" v-if="form.orderStatus==0">待付款&nbsp; 距离订单失效还有
					<!-- <countDown :endTime="form.countdown" /> -->
					<count-down :endTime="endTime" :endText="endText " />
				</div>
				<div class="custom-item" v-if="form.orderStatus==1">待接单</div>
				<div class="custom-item" v-if="form.orderStatus==2">已接单</div>
				<div class="custom-item" v-if="form.orderStatus==3">已出发</div>
				<div class="custom-item" v-if="form.orderStatus==4">已到达</div>
				<div class="custom-item" v-if="form.orderStatus==5">服务中</div>
				<div class="custom-item" v-if="form.orderStatus==7">待评价</div>
				<div class="custom-item" v-if="form.orderStatus==8">待打款</div>
				<div class="custom-item" v-if="form.orderStatus==9">已结束</div>
				<div class="custom-item" v-if="form.orderStatus==10">已取消</div>
				<!-- <div class="custom-item" v-if="form.orderStatus==11">售后中</div> -->
				<div class="custom-item" v-if="form.orderStatus==11">售后中
					<!-- 距离服务结束还有 -->
					<!-- <count-down :endTime="serviceOverCountDown" /> -->
				</div>
				<div class="custom-item" v-if="form.orderStatus==12">退款成功</div>
				<div class="custom-item" v-if="form.orderStatus==13">退款失败</div>
			</div>

			<el-steps :active="orderStatus" align-center direction="vertical" :space="80">
				<el-step v-for="(item,index) in caseHistoryData" :key="item.index" class="stepShowTem">
					<!-- //icon的插槽使用 -->
					<i class="dotShow"></i>
					<!-- //利用插槽 -->
					<template slot="description">
						<div class="">{{item.title}}</div>
						<div class="">{{item.time}}</div>
						<div v-if="index==2&&item.img">
							<image-preview :src="item.img" :width="60" :height="60" />
						</div>
						<div class="" v-if="index==1">{{item.address}}</div>
						<div class="" v-if="index==2">{{item.address}}</div>
					</template>
				</el-step>
				<!-- <el-step title="技师出发" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="技师到达" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="开始服务" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="服务完成" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="确认订单" description="这是一段很长很长很长的描述性文字"></el-step> -->
			</el-steps>

			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="订单信息" name="first">
					<el-form ref="form" :model="form" :rules="rules">
						<div class="lb-goods-edit-classify mb-lg row">
							<div class="title">用户信息</div>
						</div>
						<div class="boxShowWid row">
							<div class="row">
								<span class="divOrdTip">用户ID：</span>
								<span class="divOrdTip divOrdRig">{{form.userId}}</span>
							</div>
							<div class="row">
								<span class="divOrdTip">用户昵称：</span>
								<span class="divOrdTip divOrdRig">{{form.userName}}</span>
							</div>
							<div class="row">
								<span class="divOrdTip">绑定手机号：</span>
								<span class="divOrdTip divOrdRig">{{form.userTel}}</span>
							</div>
							<div class="row">
								<span class="divOrdTip">消费次数：</span>
								<span class="tips">{{form.placeOrderCount}}</span>
							</div>
						</div>
						<div class="lb-goods-edit-classify mb-lg row">
							<div class="title">上门信息</div>
						</div>
						<div class="row boxShowWid">
							<div class="row" style="">
								<span class="divOrdTip">下单人：</span>
								<span class="divOrdTip divOrdRig row">
									<span style="margin-right: 5px;">{{form.addressUserName}}</span>
									<el-button type="text" plain size="mini" @click="handleLabel">查看标签</el-button>
								</span>

							</div>
							<div class="row">
								<span class="divOrdTip">联系方式：</span>
								<span class="divOrdTip divOrdRig">{{form.addressTel}}</span>
							</div>
							<div class="row divOrdDeta">
								<span class="divOrdTip">服务地址：</span>
								<span class="divOrdTip divOrdRig">{{form.addressDetail}}</span>
							</div>

						</div>
						<div class="lb-goods-edit-classify mb-lg row">
							<div class="title">技师信息</div>
						</div>
						<div class="row">
							<div class="row techInfoBox">
								<el-form-item prop="tavatar" style="margin: 0;">
									<image-preview :src="form.tavatar" :width="60" :height="60" />
								</el-form-item>
								<div class="rightTitle">
									<div class="titleRigId">{{form.tname}}</div>
									<div class="titleRigId">{{form.ttel}}</div>
								</div>
							</div>
							<div class="row techOrderInfo">
								<span class="techOrdTip">用户下单时技师地址：</span>
								<span class="divOrdTip divOrdRig">{{form.leaveAddress}}</span>
							</div>
						</div>
						<div class="lb-goods-edit-classify mb-lg row">
							<div class="title">订单信息</div>
						</div>

						<div class="row">
							<span class="divOrdTip">订单号：</span>
							<span class="divOrdTip divOrdRig">{{form.orderNo}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">经纪人：</span>
							<span class="divOrdTip divOrdRig">{{form.brokerName}}</span>
						</div>
						<div class="row" v-if="form.channelName != ''">
							<span class="divOrdTip">渠道商：</span>
							<span class="divOrdTip divOrdRig">{{form.channelName}}</span>
						</div>
						<div class="row" v-if="form.salesmanName != ''">
							<span class="divOrdTip">业务员：</span>
							<span class="divOrdTip divOrdRig">{{form.salesmanName}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">下单时间：</span>
							<span class="divOrdTip divOrdRig">{{form.placeOrderTime}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">服务时间：</span>
							<span class="divOrdTip divOrdRig">{{form.startServiceTime}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">服务时长：</span>
							<span class="divOrdTip divOrdRig">{{form.itemTime}}分钟</span>
						</div>
						<div class="row">
							<span class="divOrdTip">车费详情：</span>
							<span class="divOrdTip divOrdRig">{{form.modeTravel}} 全程{{form.distance}}km</span>
						</div>
						<div class="row">
							<span class="divOrdTip">出行费用：</span>
							<span class="tips">￥{{form.orderFarePrice}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">服务项目费用：</span>
							<span class="tips">￥{{form.orderItemPrice}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">卡券优惠：</span>
							<span class="tips">￥{{form.couponPrice}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">实付金额：</span>
							<span class="tips">￥{{form.orderTotalPrice}}</span>
						</div>
						<div class="row">
							<span class="divOrdTip">实付金额：</span>
							<dict-tag :options="dict.type.pay_type" :value="form.payType" />
						</div>
						<!-- <div class="row">
							<span class="divOrdTip">录音文件：</span>
							<span class="tips">{{form.recordUrl}}</span>
							<el-button size="mini" type="text" icon="el-icon-edit">下载</el-button>
						</div> -->


					</el-form>
				</el-tab-pane>
				<el-tab-pane label="服务内容" name="second">
					<div class="lb-goods-edit-classify mb-lg row">
						<div class="title">服务项目</div>
					</div>
					<el-table v-loading="loading" :data="technicianFrom" class="elTable">
						<el-table-column label="服务项目" align="center" prop="itemPicture">
							<template slot-scope="scope">
								<image-preview :src="scope.row.itemPicture" :width="50" :height="50" />
							</template>
						</el-table-column>
						<el-table-column label="服务名称" align="center" prop="itemName" />
						<!-- <el-table-column label="服务时长" align="center" prop="totalServiceTime">
							<template slot-scope="scope">
								{{scope.row.totalServiceTime}}分钟
							</template>
						</el-table-column> -->
						<el-table-column label="服务价格" align="center" prop="orderItemPrice" />
						<el-table-column label="服务时长" align="center" prop="itemTime" />
						<el-table-column label="服务数量" align="center" prop="orderNum" />
					</el-table>
					<div class="lb-goods-edit-classify mb-lg row">
						<div class="title">升级项目</div>
					</div>
					<el-table v-loading="loading" :data="technicianUpgradeItemOrderList" class="elTable">

						<el-table-column label="服务项目" align="center" prop="itemPicture">
							<template slot-scope="scope">
								<image-preview :src="scope.row.itemPicture" :width="50" :height="50" />
							</template>
						</el-table-column>
						<el-table-column label="服务名称" align="center" prop="itemName" />
						<el-table-column label="服务价格" align="center" prop="orderItemPrice" />
						<el-table-column label="合计差价" align="center" prop="needPayPrice" />
						<el-table-column label="服务时长" align="center" prop="itemTime" />
						<el-table-column label="服务数量" align="center" prop="orderNum" />
					</el-table>

					<div class="lb-goods-edit-classify mb-lg row">
						<div class="title">加钟项目</div>
					</div>
					<el-table v-loading="loading" :data="technicianBellItemOrderList" class="elTable">

						<el-table-column label="服务项目" align="center" prop="itemPicture">
							<template slot-scope="scope">
								<image-preview :src="scope.row.itemPicture" :width="50" :height="50" />
							</template>
						</el-table-column>
						<el-table-column label="服务名称" align="center" prop="itemName" />
						<el-table-column label="服务价格" align="center" prop="orderItemPrice" />
						<el-table-column label="服务时长" align="center" prop="itemTime" />
						<el-table-column label="服务数量" align="center" prop="orderNum" />
					</el-table>

				</el-tab-pane>
				<el-tab-pane label="录音文件" name="third">
					<div class="lb-goods-edit-classify mb-lg row">
						<div class="title">录音文件</div>
					</div>
					<el-table v-loading="loading" :data="voiceNotifyList">
						<el-table-column label="ID" align="center" prop="id" />
						<el-table-column label="用户ID" align="center" prop="userId" />
						<el-table-column label="技师ID" align="center" prop="tid" />
						<el-table-column label="小号" align="center" prop="displayNumber" />
						<el-table-column label="主叫号码" align="center" prop="callerNumber" />
						<el-table-column label="被叫号码" align="center" prop="calleeNumber" />
						<el-table-column label="呼叫开始时间" align="center" prop="startCallTime" />
						<el-table-column label="结束时间" align="center" prop="endTime" />
						<el-table-column label="主叫呼叫状态" align="center" prop="callerState">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.call_state" :value="scope.row.callerState" />
							</template>
						</el-table-column>
						<el-table-column label="被叫呼叫状态" align="center" prop="calleeState">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.call_state" :value="scope.row.calleeState" />
							</template>
						</el-table-column>
						<el-table-column label="时长(s)" align="center" prop="duration" />
						<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
							<template slot-scope="scope">
								<el-button size="mini" type="text" icon="el-icon-edit" @click="handleViewAudo(scope.row)"
									v-hasPermi="['middleNotify:middleNotify:edit']">查看</el-button>
								<el-button size="mini" type="text" icon="el-icon-delete"
									@click="handleDelete(scope.row)"
									v-hasPermi="['middleNotify:middleNotify:remove']">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="voiceTotal>0" :total="voiceTotal" :page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize" @pagination="voiceList" />
				</el-tab-pane>
				<el-tab-pane label="分销佣金" name="four">
					<div class="row">
						<span class="divOrdTip">订单金额：</span>
						<span class="divOrdTip divOrdRig">￥{{form.orderTotalPrice}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">服务项目费：</span>
						<span class="divOrdTip divOrdRig">￥{{form.orderItemPrice}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">卡券优惠：</span>
						<span class="tips">￥{{form.couponPrice}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">车费：</span>
						<span class="divOrdTip divOrdRig">￥{{form.orderFarePrice}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">技师提成：</span>
						<span class="divOrdTip divOrdRig">￥{{form.technicianItemIncome}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">经纪人提成：</span>
						<span class="divOrdTip divOrdRig">￥{{form.brokerIncome}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">渠道商：</span>
						<span class="divOrdTip divOrdRig">￥{{form.channelIncome}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">业务员提成：</span>
						<span class="divOrdTip divOrdRig">￥{{form.salesmanIncome}}</span>
					</div>
				</el-tab-pane>
			</el-tabs>

			<div class="dialog-footer">
				<el-button type="primary" @click="goBack">返 回</el-button>
			</div>
		</el-card>

		<!-- 添加或修改会员设置对话框 -->
		<!-- userLabelName -->
		<el-dialog :title="labelTitle" :visible.sync="open" width="500px" append-to-body center>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px" labelPosition="top">
				<el-form-item label="标签" prop="userLabelName">
					<el-tag v-for="item in form.userLabelName" class="elTag">{{item}}</el-tag>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<!-- 录音文件 -->
		<el-dialog title="录音文件" :visible.sync="audioOpen" width="600px" append-to-body center>
		   <el-table :data="gridData" max-height="500px">
		      <el-table-column label="文件" align="center">
		      	<template slot-scope="scope">
		      		<audio :src="scope" controls></audio>
		      	</template>
		      </el-table-column>
		    </el-table>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="audioOpen=false">取 消</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	import Vue from 'vue'
	// import countDown from '@/components/CountDown.vue';
	import countDown from '@/components/ceshi.vue';
	import {
		getTechnicianItemOrder
	} from "@/api/technicianItemOrder/technicianItemOrder";
	import {
		listTechnicianUpgradeItemOrder
	} from "@/api/technicianUpgradeItemOrder/technicianUpgradeItemOrder";
	import {
		listTechnicianBellItemOrder
	} from "@/api/technicianBellItemOrder/technicianBellItemOrder";

	import {
		listMiddleNotify
	} from "@/api/middleNotify/middleNotify";
	export default {
		dicts: ['pay_type', 'call_state'],
		components: {
			// countDown,
			countDown
		},
		data() {
			return {
				orderStatus: null,
				open: false,
				activeName: 'first',
				// 遮罩层
				loading: true,
				id: null,
				// 总条数
				total: 0,
				bellTotal: 0,
				voiceTotal: 0,
				labelTitle: '',
				// 语音通知记录表格数据
				voiceNotifyList: [],
				// 升级订单表格数据
				technicianUpgradeItemOrderList: [],
				technicianBellItemOrderList: [],
				// 表单参数
				form: {},
				technicianFrom: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					partnerOrderNo: null,
				},
				// 插槽数据
				caseHistoryData: [{
						title: '技师接单',

					},
					{
						title: '技师出发',

					},
					{
						title: '技师到达',

					},
					{
						title: '开始服务',

					},
					{
						title: '服务完成',

					},
					{
						title: '已结束',

					}
				],
				// 表单校验
				rules: {},
				endTime: '',
				//  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法,
				endText: '',
				
				audioOpen:false,
				// 录音列表
				gridData:[]
			};
		},
		created() {
			this.id = this.$route.query.id
			if (this.id) this.handleUpdate();
		},
		methods: {
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.loading = true;
				getTechnicianItemOrder(this.id).then(response => {
					this.form = response.data;
					// endTime: new Date("2025/04/18 08:00:20").getTime() / 1000 + ' ',
					this.endTime = (new Date(this.form.placeOrderTime).getTime() + (10 * 60000)) / 1000 + ' ',
						console.log(this.endTime)
					// this.endTime= 700000 / 1000+ ' ',
					this.caseFormData(this.form)
					this.technicianFrom.push(this.form)
					this.loading = false;
				});
			},
			// 查看标签按钮
			handleLabel() {
				this.labelTitle = '用户概况'
				this.open = true

			},
			/** 查询升级订单列表 */
			techUpGradeList() {
				this.loading = true;
				this.queryParams.partnerOrderNo = this.form.orderNo
				listTechnicianUpgradeItemOrder(this.queryParams).then(response => {
					this.technicianUpgradeItemOrderList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 查询加钟订单列表 */
			bellItemtList() {
				this.loading = true;
				this.queryParams.partnerOrderNo = this.form.orderNo
				listTechnicianBellItemOrder(this.queryParams).then(response => {
					this.technicianBellItemOrderList = response.rows;
					this.bellTotal = response.total;
					this.loading = false;
				});
			},
			/** 查询语音通知记录列表 */

			/** 查询通话记录列表 */
			voiceList() {
				this.loading = true;
				this.queryParams.orderNo = this.form.orderNo
				listMiddleNotify(this.queryParams).then(response => {
					this.voiceNotifyList = response.rows;
					this.voiceTotal = response.total;
					this.loading = false;
				});
			},


			handleClick(tab, event) {
				this.activeName = tab.name
				if (this.activeName == 'second') {
					this.techUpGradeList()
					this.bellItemtList()
				}
				if (this.activeName == 'third') this.voiceList()

			},
			handleViewAudo(row){
				const auditItem = this.voiceNotifyList.find(item=>item.id==row.id)
				this.gridData = auditItem.recUrl.split(',')
				this.audioOpen = true
			},
			caseFormData(form) {
				// [0].time = form.
				let forTime, address, img

				if (form.orderStatus == 2) this.orderStatus = 0
				if (form.orderStatus == 3) this.orderStatus = 1
				if (form.orderStatus == 4) this.orderStatus = 2
				if (form.orderStatus == 5) this.orderStatus = 3
				if (form.orderStatus == 8) this.orderStatus = 4
				if (form.orderStatus == 7 || form.orderStatus == 9) this.orderStatus = 5

				if (form.orderStatus == 11 || form.orderStatus == 12 || form.orderStatus == 13) {
					if (form.orderOldStatus == 2) this.orderStatus = 0
					if (form.orderOldStatus == 3) this.orderStatus = 1
					if (form.orderOldStatus == 4) this.orderStatus = 2
				}
				this.caseHistoryData = this.caseHistoryData.map((item, index) => {
					if (index == 0) forTime = form.takeOrderTime
					if (index == 1) forTime = form.proceedTime
					if (index == 2) forTime = form.arriveTime
					if (index == 3) forTime = form.startServiceTime
					if (index == 4) forTime = form.stopServiceTime

					if (index == 1) address = form.leaveAddress
					if (index == 2) address = form.arriveAddress

					if (index == 2) img = form.arrivePicture
					return {
						...item,
						time: forTime,
						address: address,
						img: img
					};
				});
			},
			goBack() {
				this.$commonJs.backRou()
			},
		},
	}
</script>

<style lang="less">
	.box-card {
		margin: 20px;

		.mb-lg {
			margin-bottom: 15px;
		}
	}

	.tech-topView {
		border-bottom: 1px solid #e1e1e1;
		padding-bottom: 10px;

		.el-title-text {
			font-size: 14px;
			color: #666;
			margin-left: 10px;
		}
	}

	.danger {
		border-left: 5px solid #fe6c6f;
		background: #fff6f7;
	}

	.lb-tips {
		width: 100%;
		padding: 20px;
		border-radius: 4px;
		margin: 16px 0;

		// display: -webkit-box;
		// display: -ms-flexbox;
		// display: flex;
		// -webkit-box-align: center;
		// -ms-flex-align: center;
		// align-items: center;
		// -webkit-box-pack: center;
		// -ms-flex-pack: center;
		// justify-content: center;


		.custom-item {
			flex: 1;
			font-size: 14px;
			color: #666;
		}
	}

	.stepShowTem {
		.dotShow {
			width: 14px;
			height: 14px;
			background: #3f87e3;
			border-radius: 50%;
			display: block;
		}
	}

	.techInfoBox {
		width: 25%;
		margin: 0 0 20px 20px;

		.rightTitle {
			margin-left: 20px;

			.titleRigId {
				font-size: 14px;
				color: #606266;
				line-height: 25px;
			}
		}
	}

	.techOrderInfo {
		width: 70%;

		.techOrdTip {
			text-align: right;
			vertical-align: middle;
			float: left;
			font-size: 12px;
			color: #606266;
			line-height: 40px;
			padding: 0 12px 0 0;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
	}


	.lb-goods-edit-classify {
		width: 100%;
		border-top: 1px solid #eff2f6;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		.title {
			display: inline-block;
			padding: 6px 15px;
			color: #609beb;
			background: #f5f7fa;
			margin-right: 10px;
			font-size: 14px;
		}
	}

	.boxShowWid {
		margin: 0 50px 0 0;

		div {
			width: 25%;
		}

		.divOrdTip {
			// width: 100px;
		}

		.divOrdRig {
			max-width: 100%;
		}

	}

	.divOrdDeta {
		flex: 1;
		.divOrdRig {
			width: 100%;
		}
	}



	.tips {
		color: #fe6c6f;
		font-size: 12px;
	}

	.divOrdTip {
		width: 120px;
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 12px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.divOrdRig {
		width: 50%;
		color: #333;
		text-align: left;
	}

	.elTable {
		margin-bottom: 20px;
	}

	.el-tabs__content {
		overflow: inherit;
	}

	.el-step__icon {
		width: 20px;
		height: 20px;
		margin: auto;
	}

	.elTag {
		margin: 0 10px 10px;
	}
</style>